// ScriptUploadForm.tsx
import React, { useEffect } from 'react';
import { Form, Input, message, Modal } from 'antd';
import Editor from '@monaco-editor/react';
import { addScript, editScript } from '@/services/striptManage';

// 自定义编辑器样式
const editorStyle = {
  width: '100%',
  border: '1px solid #d9d9d9',
  borderRadius: '4px',
  overflow: 'hidden',
  transition: 'all 0.3s',
  '&:hover': {
    borderColor: '#40a9ff',
    boxShadow: '0 0 0 2px rgba(24, 144, 255, 0.2)',
  },
};


const { TextArea } = Input;

interface FormValues {
  fileName: string;
  scriptText: string;
  scriptName: string;
}

const ScriptUploadForm: React.FC<any> = (props) => {
  const { open, onClose, refresh, data, type } = props;
  const [form] = Form.useForm<FormValues>();

  const handleCancel = () => {
    form.resetFields();
    onClose();
  };
  // 提交
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const params = {
        fileName: values.fileName,
        scriptText: values.scriptText,
        scriptName: values.scriptName,
      };
      const req = type === 'edit' ? editScript : addScript;
      await req(params).then((res) => {
        if (res.code === 200) {
          message.success(type === 'edit' ? '编辑成功' : '上传成功');
          refresh();
          handleCancel();
        } else {
          message.error(type === 'edit' ? '编辑成功' : '上传成功');
        }
      });
    } catch (errorInfo) {
      console.log('Failed:', errorInfo);
      message.error('提交失败');
    }
  };

  const titleRender = () => {
    switch (type) {
      case 'add':
        return '上传脚本';
      case 'edit':
        return '编辑脚本';
      case 'view':
        return '查看脚本';
      default:
        return '上传脚本';
    }
  };

  useEffect(() => {
    if (open && JSON.stringify(data) !== '{}') {
      form.setFieldsValue({
        fileName: data?.fileName,
        scriptText: data?.scriptText,
        scriptName: data?.scriptName,
      });
    }
  }, [JSON.stringify(data), open]);

  return (
    <Modal
      title={titleRender()}
      open={open}
      onCancel={handleCancel}
      onOk={() => form.submit()}
      destroyOnClose
    >
      <Form form={form} layout="vertical" onFinish={handleSubmit} disabled={type === 'view'}>
        <Form.Item<FormValues>
          label="脚本名称"
          name="scriptName"
          rules={[{ required: true, message: '请输入脚本名称' }]}
        >
          <Input placeholder="请输入脚本名称" />
        </Form.Item>

        <Form.Item<FormValues>
          label="文件名称"
          name="fileName"
          rules={[
            { required: true, message: '请输入文件名' },
            { pattern: /\.[a-zA-Z]+$/, message: '必须包含文件后缀' },
          ]}
        >
          <Input placeholder="请输入文件名" />
        </Form.Item>

        <Form.Item<FormValues>
          label="脚本内容"
          name="scriptText"
          rules={[{ required: true, message: '请输入脚本内容' }]}
        >
          <TextArea autoSize={{ minRows: 5, maxRows: 10 }} allowClear placeholder="请输入脚本内容" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ScriptUploadForm;